
<template>
	<el-date-picker
		class="week-picker"
		v-model="value"
		type="week"
		:picker-options="{firstDayOfWeek:1}"
		format="yyyy 第 WW 周"
		@focus="activepicker"
		@blur="blurpicker"
		@change="timechange"
		:placeholder="placeHolder">
	</el-date-picker>
</template>

<script>
	export default{
		data(){
			return {
				value:'',
				realValue:'',
				placeHolder:''
			}
		},
		methods:{
			init(){
				//默认选择本周日期
				let t=tool.getTimeObjByType(2);
				let firstday=new Date(t.startTime.replace(/-/g,'/'));
				this.placeHolder=this.getPlaceHolder(firstday);
				this.realValue=firstday;
				this.$emit('input', this.getResult());//v-model绑定支持
			},
			getPlaceHolder(t){
				let time=new Date(t);
				let num = time.getDay() || 7;
				time.setDate(time.getDate() - num + 1);
				let startTime = tool.DateToString(time, "yyyy-MM-dd");
				time.setDate(time.getDate() + 4);
				let endTime = tool.DateToString(time, "yyyy-MM-dd");
				return startTime+' 至 '+endTime
			},
			getResult(){
				let time=new Date(this.realValue);
				let num = time.getDay() || 7;
				time.setDate(time.getDate() - num + 1);
				let startTime = tool.DateToString(time, "yyyy-MM-dd HH:mm:ss");
				time.setDate(time.getDate() + 4);
				let endTime = tool.DateToString(time, "yyyy-MM-dd HH:mm:ss");
				return [startTime,endTime];
			},

			activepicker(val){
				this.value=this.realValue;
			},
			blurpicker(){
				this.value='';
			},
			timechange(val){
				this.placeHolder=this.getPlaceHolder(val);
				this.realValue=val;
				this.value='';

				let result=this.getResult();
				this.$emit('callback',result);
				this.$emit('input', result);//v-model绑定支持
			},
		},
		mounted(){
			this.init();
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.week-picker{
		width: 100%;
		::placeholder {
			color: #606266  !important;
		}
	}
</style>